import React, { useState } from 'react';
import { Input, Select, Button, Space, Card } from 'antd';
import { SearchOutlined, FilterOutlined, ReloadOutlined } from '@ant-design/icons';

interface SearchBarProps {
  placeholder?: string;
  onSearch?: (value: string) => void;
  onRefresh?: () => void;
  disabled?: boolean;
}

// 搜索栏组件
const SearchBar: React.FC<SearchBarProps> = ({ 
  placeholder = '搜索AI人员姓名、描述...', 
  onSearch,
  onRefresh,
  disabled = true // 暂时禁用，等接口准备好后启用
}) => {
  const [searchValue, setSearchValue] = useState('');
  const [sortBy, setSortBy] = useState('latest');

  const handleSearch = () => {
    onSearch?.(searchValue);
  };

  const handleClear = () => {
    setSearchValue('');
    onSearch?.('');
  };

  return (
    <Card className="mb-6 shadow-sm border-0" bodyStyle={{ padding: '20px' }}>
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        {/* 搜索输入框区域 */}
        <div className="flex-1 max-w-2xl">
          <Space.Compact size="large" className="w-full">
            <Input
              placeholder={placeholder}
              value={searchValue}
              onChange={(e) => setSearchValue(e.target.value)}
              onPressEnter={handleSearch}
              disabled={disabled}
              prefix={<SearchOutlined className="text-gray-400" />}
              className="flex-1"
              style={{ borderRadius: '8px 0 0 8px' }}
            />
            <Button 
              type="primary" 
              icon={<SearchOutlined />}
              onClick={handleSearch}
              disabled={disabled}
              style={{ borderRadius: '0 8px 8px 0' }}
            >
              搜索
            </Button>
          </Space.Compact>
          {disabled && (
            <p className="text-gray-400 text-xs mt-1">🔒 搜索功能开发中，敬请期待</p>
          )}
        </div>

        {/* 筛选和操作区域 */}
        <div className="flex items-center gap-3">
          <Select
            placeholder="排序方式"
            value={sortBy}
            onChange={setSortBy}
            className="w-32"
            disabled={disabled}
            options={[
              { value: 'latest', label: '最新添加' },
              { value: 'popular', label: '最受欢迎' },
              { value: 'name', label: '按姓名' },
              { value: 'age', label: '按年龄' }
            ]}
          />
          
          <Button
            icon={<FilterOutlined />}
            disabled={disabled}
            className="border-gray-300"
          >
            筛选
          </Button>
          
          <Button
            icon={<ReloadOutlined />}
            onClick={onRefresh}
            className="border-gray-300"
            title="刷新数据"
          >
            刷新
          </Button>
        </div>
      </div>

      {/* 快速筛选标签 */}
      <div className="mt-4 flex flex-wrap gap-2">
        <span className="text-sm text-gray-500 mr-2">快速筛选:</span>
        {['年龄18-25', '动漫风格', '真人风格', '最新上传'].map((tag) => (
          <Button
            key={tag}
            size="small"
            type="text"
            disabled={disabled}
            className="text-xs h-6 px-2 bg-gray-100 hover:bg-blue-50 hover:text-blue-600 border-0 rounded-full"
          >
            {tag}
          </Button>
        ))}
      </div>
    </Card>
  );
};

export default SearchBar; 